<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>测试Tabs</title>
    <style>
        body {
            background-color: #efeff4;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
    </style>
<link href="http://res.wx.qq.com/open/libs/weui/1.0.2/weui.min.css" rel="stylesheet"></head>
<body>
<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div class="weui-navbar">
                <div id='1' class="weui-navbar__item weui-bar__item_on">
                    选项一
                </div>
                <div id='2' class="weui-navbar__item">
                    选项二
                </div>
                <div id='3' class="weui-navbar__item">
                    选项三
                </div>
            </div>
            <div class="weui-tab__panel">

            </div>
        </div>
    </div>
</div>
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.weui-navbar__item').on('click', function () {
        	console.info('id = '+$(this).attr('id'))
            $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
        });
    });
</script>

<div class="weui-tab">
    <div class="weui-tab__panel">
<pre>
sdfs
sdf
sdf
asdfs
dfsdf
sdfs
dfsdfs
dfasdf
asdf
</pre>
    </div>
    <div class="weui-tabbar">
        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">微信</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">通讯录</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">发现</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <p class="weui-tabbar__label">我</p>
        </a>
    </div>
</div>


<script src="vendor.bundle.js"></script><script src="bundle.js"></script></body>
</html>